<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    
    <script src="/js/My97DatePicker/WdatePicker.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> 
    <style type="text/css">
       html,body{          
           height:100%;
       }
       #contain{
      	   width:60%;
           height:80%;
           position:absolute;
           left:30%;
           top:43%;
       }
    </style>
    <%@ include file="../common/header.jsp" %>
</head>

<body>

<div class="container " style="margin-top: 20px">
    <%@ include file="../common/top.jsp" %>
</div>
    <div class="row">
        <div class="col-sm-3" style="left:7.6%;width:21.2%">
            <c:set var="menu" value="map"/>
            <%@ include file="../common/menu.jsp" %>
        </div>
		
        <div class="row">
		<h1 class="page-head-line" style="left:29.5%;width:62%;position:absolute;">定位城市</h1>
		<div class="inf"  style="left:30%;width:50%; position:absolute;top:30%"><p id='inf'></p></div><br>
		<div class="show"  style="left:30%;width:50%; position:absolute;top:33%">左击显示经纬度：<input type="text" readonly="true" id="lnglat" size=20></p></div>
		
		<div id="contain" ></div>
      	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=0e8a587317998a5e03cf608649b229d6&plugin=AMap.CitySearch,AMap.Autocomplete"></script>

		<script type="text/javascript">
		    var map = new AMap.Map("contain", {
		        resizeEnable: true,
		        center: [116.397428, 39.90923],
		        zoom: 13
		    });
		    //获取用户所在城市信息
		    function showCityInfo() {
		        //实例化城市查询类
		        var citysearch = new AMap.CitySearch();
		        //自动获取用户IP，返回当前城市
		        citysearch.getLocalCity(function(status, result) {
		            if (status === 'complete' && result.info === 'OK') {
		                if (result && result.city && result.bounds) {
		                    var cityinfo = result.city;
		                    var citybounds = result.bounds;
		                    document.getElementById('inf').innerHTML = '您当前所在城市：'+cityinfo;
		                    //地图显示当前城市
		                    map.setBounds(citybounds);
		                }
		            } else {
		                document.getElementById('inf').innerHTML = result.info;
		            }
		        });
		    }
		    showCityInfo();
		    
		  //为地图注册click事件获取鼠标点击出的经纬度坐标
			 map.on('click', function(e) {
		        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
		    });
		    var auto = new AMap.Autocomplete({
		        input: "tipinput"
		    });
		    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
		    function select(e) {
		        if (e.poi && e.poi.location) {
		            map.setZoom(15);
		            map.setCenter(e.poi.location);
		        }
		    }
		</script>
</div></div>
</body>
</html>

